<template>
  <div class="app-container">
    <!--查询条件开始-->
    <el-row :gutter="20" style="margin-bottom:5px">
        <el-col :span="24">
          <el-card class="box-card">
            <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
    
             <el-form-item label="部门名称" prop="medicinesType">
                <el-select
                  v-model="queryParams.deptId"
                  placeholder="请选择部门名称"
                  clearable
                  size="small"
                  style="width:180px"
                >
                  <el-option
                    v-for="dict in deptOptions"
                    :key="dict.deptId"
                    :label="dict.deptName"
                    :value="dict.deptId"
                  />
                </el-select>
                </el-form-item>
                <el-form-item label="医生名称" prop="producterId">
                    <el-select
                      v-model="queryParams.userId"
                      placeholder="请选择医生名称"
                      clearable
                      size="small"
                      style="width:180px"
                    >
                    <el-option
                      v-for="dict in userOptions"
                      :key="dict.userId"
                      :label="dict.userName"
                      :value="dict.userId"
                    />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item style="float:right">
                      <el-button type="primary" icon="el-icon-plus" size="small" @click="upWeek()">上一周</el-button>
                      <el-button type="success" icon="el-icon-s-operation" size="small" @click="currentWeek()">当前周</el-button>
                      <el-button type="primary" icon="el-icon-plus" size="small" @click="nextWeek()">下一周</el-button>
                   </el-form-item>

              </el-form>

          </el-card>
        </el-col>
    </el-row>
    <!--查询条件结束-->
    <!--时间范围开始-->
     <el-row :gutter="20" style="margin-bottom:5px">
        <el-col :span="24">
          <el-card class="box-card" style="text-align:center">
              {{this.schedulingData.startTimeThisWeek}}(周一)-{{this.schedulingData.endTimeThisWeek}}{周日}
          </el-card>
        </el-col>
    </el-row>
    <!--时间结束开始-->
    <!--数据表格开始-->
     <el-row :gutter="20" style="margin-bottom:5px">
        <el-col :span="24">
          <el-card class="box-card" style="text-align:center">
              <el-table v-loading="loading" :data="tableData" border :span-method="spanMethod" >
                  <el-table-column label="医生" prop="userId" align="center" :formatter="userFormat" />
                  <el-table-column label="部门" prop="deptId" align="center" :formatter="deptFormat" />
                  <el-table-column label="时间/日期" prop="subsectionType" align="center" :formatter="subsectionTypeFormat"  />
                  <el-table-column :label="labelNames[0]" prop="schedulingType[0]" align="center" :formatter="schedulingTypeDay1Formatter" />
                  <el-table-column :label="labelNames[1]" prop="schedulingType[1]" align="center" :formatter="schedulingTypeDay2Formatter" />
                  <el-table-column :label="labelNames[2]" prop="schedulingType[2]" align="center" :formatter="schedulingTypeDay3Formatter" />
                  <el-table-column :label="labelNames[3]" prop="schedulingType[3]" align="center" :formatter="schedulingTypeDay4Formatter" />
                  <el-table-column :label="labelNames[4]" prop="schedulingType[4]" align="center" :formatter="schedulingTypeDay5Formatter" />
                  <el-table-column :label="labelNames[5]" prop="schedulingType[5]" align="center" :formatter="schedulingTypeDay6Formatter" />
                  <el-table-column :label="labelNames[6]" prop="schedulingType[6]" align="center" :formatter="schedulingTypeDay7Formatter" />
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button  type="text" icon="el-icon-edit" :disabled="weekflag" size="mini" @click="editScheduling(scope.row.userId)">编辑</el-button>
                    </template>
                  </el-table-column>
              </el-table>
          </el-card>
        </el-col>
    </el-row>
    <!--数据表格结束-->
    <!--编辑弹出层开始-->
    <el-dialog
      :title="title"
      :visible.sync="open"
      center
      width="1200px"
      append-to-body
    >
    <el-table  :data="editTableData" border  >
                  <el-table-column label="时间/日期" prop="subsectionType" align="center" :formatter="subsectionTypeFormat"  />
                  <el-table-column :label="labelNames[0]" prop="schedulingType[0]" align="center" >
                    <template slot-scope="scope">
                      <el-select
                      v-model="scope.row.schedulingType[0]"
                      clearable
                      size="small"
                      >
                        <el-option 
                          v-for="d in schedulingTypeOptions"
                          :key="d.dictValue"
                          :label="d.dictLabel"
                          :value="d.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column :label="labelNames[1]" prop="schedulingType[1]" align="center" >
                    <template slot-scope="scope">
                      <el-select
                      v-model="scope.row.schedulingType[1]"
                      clearable
                      size="small"
                      >
                        <el-option 
                          v-for="d in schedulingTypeOptions"
                          :key="d.dictValue"
                          :label="d.dictLabel"
                          :value="d.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column :label="labelNames[2]" prop="schedulingType[2]" align="center" >
                    <template slot-scope="scope">
                      <el-select
                      v-model="scope.row.schedulingType[2]"
                      clearable
                      size="small"
                      >
                        <el-option 
                          v-for="d in schedulingTypeOptions"
                          :key="d.dictValue"
                          :label="d.dictLabel"
                          :value="d.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column :label="labelNames[3]" prop="schedulingType[3]" align="center" >
                    <template slot-scope="scope">
                      <el-select
                      v-model="scope.row.schedulingType[3]"
                      clearable
                      size="small"
                      >
                        <el-option 
                          v-for="d in schedulingTypeOptions"
                          :key="d.dictValue"
                          :label="d.dictLabel"
                          :value="d.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column :label="labelNames[4]" prop="schedulingType[4]" align="center" >
                    <template slot-scope="scope">
                      <el-select
                      v-model="scope.row.schedulingType[4]"
                      clearable
                      size="small"
                      >
                        <el-option 
                          v-for="d in schedulingTypeOptions"
                          :key="d.dictValue"
                          :label="d.dictLabel"
                          :value="d.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column :label="labelNames[5]" prop="schedulingType[5]" align="center" >
                    <template slot-scope="scope">
                      <el-select
                      v-model="scope.row.schedulingType[5]"
                      clearable
                      size="small"
                      >
                        <el-option 
                          v-for="d in schedulingTypeOptions"
                          :key="d.dictValue"
                          :label="d.dictLabel"
                          :value="d.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column :label="labelNames[6]" prop="schedulingType[6]" align="center" >
                    <template slot-scope="scope">
                      <el-select
                      v-model="scope.row.schedulingType[6]"
                      clearable
                      size="small"
                      >
                        <el-option 
                          v-for="d in schedulingTypeOptions"
                          :key="d.dictValue"
                          :label="d.dictLabel"
                          :value="d.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  
    </el-table>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!--编辑弹出层结束-->
    
  </div>
</template>
<script>
import {queryUsersNeedScheduling} from '@/api/system/user'  //最后替换为需要排版的医生
import {selectAllDept} from '@/api/system/dept'
import {queryScheduling,saveScheduling} from '@/api/doctor/scheduling'
export default {
  data() {
      return {
        weekflag:false,
        open:false,
        title:'',
        loading:false,
        tableData: [],
      editTableData:[],
      schedulingData: {},
      labelNames: ['', '', '', '', '', '', ''],
      queryParams:{},
      //医生数据
      userOptions:[],
      //部门部门数据
      deptOptions:[],
      //排班类型数据字典
      schedulingTypeOptions:[],
      //排班时段数据字典,
      subsectionTypeOptions:[],

      }
  },created(){
     
    //初始化医生数据
    queryUsersNeedScheduling(this.queryParams.deptId,this.queryParams.userId).then(res =>{  
      this.userOptions = res.data
    })
    //初始化部门部门数据
    selectAllDept().then(res =>{
      this.deptOptions = res.data
    }),
    //初始化排班类型数据字典
    this.getDataByType("his_scheduling_type").then(res =>{
      this.schedulingTypeOptions = res.data
    })
    //初始化时间数据字典  
    this.getDataByType("his_subsection_type").then(res =>{
      this.subsectionTypeOptions = res.data
    })
    this.listScheduling()
  },methods:{
    listScheduling() {
      this.loading = true
      // 调用API
      queryScheduling(this.queryParams).then(res => {
        this.labelNames = res.data.labelNames
        this.tableData = res.data.tableData
        this.schedulingData = res.data.schedulingData
        this.loading = false
      })
    },
    //确定
    handleSubmit(){
      const form = { beginDate: this.schedulingData.startTimeThisWeek, data: this.editTableData }
      console.log(this.editTableData)
      this.loading = true
      // 保存
      saveScheduling(form).then(res => {
        this.open = false
        this.msgSuccess('保存成功')
        this.listScheduling()
      }).catch(() => {
        this.msgError('保存失败')
        this.listScheduling()
      })
    },
    //取消
    cancel(){
        this.open = false
    },
    //打开编辑弹出层
    editScheduling(userId){
      this.editTableData = []
      let name = ''
      this.userOptions.map(item =>{
        if(item.userId === userId){
          name=item.userName
        }
      })
      this.title = "编辑 ["+name+"] 的排班信息"
      this.tableData.map(item =>{
        if(item.userId === userId){
            this.editTableData.push(JSON.parse(JSON.stringify(item)))
        }
      })
    this.open = true
    },
   
     // 上一周
    upWeek() {
      this.queryParams.queryDate = this.schedulingData.startTimeThisWeek
      this.listScheduling()
      // weekflag = false
    },
    // 当前周
    currentWeek() {
      this.queryParams.queryDate = undefined
      this.listScheduling()
    },
    // 下一周
    nextWeek() {
      this.queryParams.queryDate = this.schedulingData.endTimeThisWeek
      this.listScheduling()
    },

    //翻译时间
    subsectionTypeFormat(row){
        return  this.selectDictLabel(this.subsectionTypeOptions,row.subsectionType)  
    },
    //翻译排版类型
    schedulingTypeDay1Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[0])  
    },
     schedulingTypeDay2Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[1])  
    },
     schedulingTypeDay3Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[2])  
    },
     schedulingTypeDay4Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[3])  
    },
     schedulingTypeDay5Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[4])  
    },
     schedulingTypeDay6Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[5])  
    },
     schedulingTypeDay7Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[6])  
    },
    //翻译部门
    deptFormat(row){
      let name =''
      this.deptOptions.map(item =>{
        if(item.deptId === row.deptId){
          name = item.deptName
        }
      })
      return name
    },
    userFormat(row){
       let name =''
      this.userOptions.map(item =>{
        if(item.userId === row.userId){
          name = item.userName
        }
      })
      return name
    },
     spanMethod(data) { // 对于表格数据进行分组合并操作，UI组件回调函数
      // const { row, column, rowIndex, columnIndex } = data
      const { row, rowIndex, columnIndex } = data
      if (columnIndex < 2 || columnIndex > 9) { // 医生合并展示区
        const len = this.userGroup(row.userId)
        const lenName = this.userIdLen(row.userId)
        if (rowIndex === lenName) { // 某医生首位部门行
          return {
            rowspan: len,
            colspan: 1
          }
        } else {
          return { // 某医生非首位部门行
            rowspan: 0,
            colspan: 0
          }
        }
      } else { // 排班信息展示区
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    userGroup(name) { // 根据医生名称获取医生数量
      return this.tableData.filter(o => o.userId === name).length
    },
    userIdLen(name) { // 根据医生名称获取该医生第一个部门在全量部门中的偏移位置
      const tmp = Array.from(this.groupNum)
      const index = tmp.indexOf(name) // 某医生在全医生中的偏移位置
      let len = 0
      for (let i = 0; i < index; i++) {
        len += this.userGroup(tmp[i])
      }
      return len
    },


  
    

  },watch:{

  },
  computed: {
    groupNum() { // 获取医生列表数组
      return new Set(this.tableData.map(o => o.userId))
    }
  },
  watch:{
    'queryParams.deptId':{
      handler(newVal,oldVal){
        this.listScheduling()
      },
      deep:true
    },
    'queryParams.userId':{
      handler(newVal,oldVal){
        this.listScheduling()
      },
      deep:true
    }
  }
  

}
</script>
